<template>
    <div class="tip">
        <div class="tip_box">
            <b>TIP：</b>
            <div class="tip_section">
                示例1 - 变色特效：通过滤镜属性 filter 中的 hue-rotate() 实现。<br />
                示例2 - 波浪特效：通过障眼法实现。<br />
                示例3 - 吸附融合特效：通过滤镜属性 filter 中的 blur() 和 contrast() 实现。
            </div>
        </div>
    </div>
    <div class="container">
        <div class="demo1">
            <div class="box">
                <div class="value"></div>
            </div>
        </div>
        <div class="demo2">
            <div class="box" :class="isRemove ? 'box_remove' : ''">
                <div class="value">
                    <div class="wave"></div>
                    <div class="wave"></div>
                    <div class="wave"></div>
                </div>
            </div>
            <el-button class="btn" v-if="!isRemove" type="primary" @click="isRemove = true">去除障眼法</el-button>
            <el-button class="btn" v-else type="warning" @click="isRemove = false">还原</el-button>
        </div>
        <!-- <div class="demo3"></div> -->
        <div class="demo4">
            <div class="number">98.7%</div>
            <div class="panel">
                <div class="circle"></div>
                <ul class="bubbles">
                    <li v-for="item in 15" :key="item"></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
let isRemove = ref(false);
</script>
<style scoped lang="scss" src="./charge.scss"></style>
